<template>
  <PageLayout>
    <div class="table-box">
      <div class="head-box">
        <div class="title">新增套餐管理（多次卡）</div>
        <!-- <a-space :size="16">
          <a-button type="primary" @click="save">提交</a-button>
        </a-space> -->
      </div>
      <div class="bg-fff">
        <!-- :apiFetch="apiFetch"  -->
        <BasicTable
          ref="tableRef"
          :columns="columns"
          :query-params="queryData"
          :noNeedPage="true"
          :apiFetch="postDevicePackageList"
          @completeFetch="completeFetch"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'isChecked'">
              <a-checkbox
                :checked="
                  checkList?.some((item) => item.packageId === record.packageId)
                "
                @change="(e) => changeRecord(e, record)"
              ></a-checkbox>
            </template>
            <template v-if="column.key === 'amount'">
              <div class="d-flex a-center">
                <div>
                  {{ record.amount }}
                </div>
                <edit-outlined @click="edit(record)" />
              </div>
            </template>
            <template v-if="column.key === 'content'">
              <div class="d-flex a-center">
                <div>
                  {{ record.content }}
                </div>
              </div>
            </template>
          </template>
        </BasicTable>
      </div>
    </div>

    <ConsumeModal
      ref="cusumeModalRef"
      :data="dataDetail"
      :type="type"
      @ok="tableRef.fetch()"
    ></ConsumeModal>
  </PageLayout>
</template>

<script setup>
import ConsumeModal from "./components/consume-modal.vue";
import {
  postDevicePackageList,
  postDeviceUpdatePackage,
  postDeviceUpdateChecked,
  postDeviceUpdateBalance,
} from "@/api/common";
import { useStoreCommonEnum } from "@/store";
import { comfirmModal } from "@/hooks/useModal";
import { message } from "ant-design-vue";
const storeCommonEnum = useStoreCommonEnum();
const router = useRouter();
const route = useRoute();

const columns = [
  {
    title: "是否勾选",
    dataIndex: "isChecked",
    width: "80px",
    key: "isChecked",
  },
  {
    title: "套餐名称",
    dataIndex: "name",
    key: "name",
    width: "150px",
    ellipsis: true,
  },

  {
    title: "套餐内容描述",
    dataIndex: "content",
    key: "content",
    width: "150px",
    ellipsis: true,
  },
  {
    title: "信用分",
    dataIndex: "amount",
    key: "amount",
    width: "150px",
    ellipsis: true,
  },
];

const queryData = reactive({
  id: route.query.id,
});
const tableRef = ref(null);
const onQueryDataByParams = (params) => {
  for (let key in params) {
    queryData[key] = params[key];
  }
  tableRef.value.refreshTableData();
};

const checkList = ref([]);

const completeFetch = (list) => {
  console.log("list", list);
  const arr = JSON.parse(JSON.stringify(list));
  checkList.value = arr
    .filter((item) => item.deviceId)
    ?.map((item) => {
      return {
        packageId: item.packageId,
        amount: item.amount,
      };
    });
  // console.log('checkList.value', checkList.value);
};

watch(
  () => checkList.value,
  () => {
    console.log("checkList.value", checkList.value);
  }
);

const changeRecord = (e, record) => {
  console.log("eeeee", e);
  // console.log('record', record);
  const checked = e.target.checked;

  postDeviceUpdateChecked({
    deviceId: queryData.id,
    packageId: record.packageId,
    checked: checked ? 1 : 0,
  }).then((res) => {
    if (checkList.value.find((item) => item.packageId == record.packageId)) {
      checkList.value = checkList.value.filter(
        (item) => item.packageId != record.packageId
      );
    } else {
      checkList.value.push({
        packageId: record.packageId,
        amount: record.amount ?? "",
      });
    }
  });

  // console.log('checkList.value', checkList.value);
};

const save = () => {
  console.log("");
  if (!checkList.value?.length) {
    message.error("请勾选套餐");
    return;
  }
  postDeviceUpdatePackage({
    deviceId: queryData.id,
    itemList: checkList.value,
  }).then((res) => {
    message.success("编辑成功");
  });
};

const type = ref("");
const dataDetail = ref({});
const cusumeModalRef = ref(null);
const edit = (record, val) => {
  console.log(33);
  dataDetail.value = {
    amount: record.amount,
    id: route.query.id,
    deviceId: route.query.id,
    packageId: record.packageId,
  };
  type.value = "amount";
  setTimeout(() => {
    cusumeModalRef.value.visible = true;
  }, 0);
};
</script>

<style lang="less" scoped></style>
